<template>
    <Cell title="">
        <template #title>
            <slot></slot>
        </template>
        <template #value>
            <slot name="right"></slot>
            <span :class="hasfilter ? '' : 'active'" @click="() => instance.showChange(true)">筛选
                <Icon name="arrow" />
            </span>
        </template>
    </Cell>
    <Popup :show="instance.show" @update:show="(value) => instance.showChange(value)" position="right"
        :style="{ width: '80%', height: '100%' }">
        <template v-for="label, index in labels" :key="index">
            <CellGroup inset :title="label.label"
                v-if="!label.show || label.show({ data, type: 'search', isPhone: true })">
                <component v-if="label.type === 'customize'"
                    :is="label.vform({ prop: label.prop as keyof T & string, data, value: data[label.prop as keyof T & string] })">
                </component>
                <component v-else :is="formRender.render(toValue(data), label)"></component>
            </CellGroup>
        </template>
        <div class="bottom_button">
            <Button type="default" @click="() => instance.onCancal()">取消筛选</Button>
            <Button type="primary" @click="() => instance.onSearch()">确认</Button>
        </div>
    </Popup>
</template>
<script lang="ts" setup generic="T extends Record<string, any>">
import { Cell, Icon, Popup, Button, CellGroup } from "vant";
import { ref, watch, toValue, computed } from 'vue';
import { ListSearch } from '@b/model/base/list_search';
import { FormRender } from "./render_item"

interface prop {
    instance: ListSearch<T>
}
const { instance } = defineProps<prop>()
const formRender = new FormRender<T, keyof T & string>();
//筛选按钮是否有颜色
const hasfilter = ref(true)
const data = computed(() => instance.data);
const labels = computed(() => toValue(instance.labels));

watch(() => instance.show, (value) => {
    if (!value) {
        const data = { ...instance.data }
        hasfilter.value = Object.keys(data).every(key => {
            const item = data[key]
            if (/^_/.test(key)) return true
            return item === undefined || item === "" || item === null
        })
    }
})
</script>

<style scoped>
.bottom_button {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1em;
}

.bottom_button button+button {
    margin-left: 0.8em;
}

.active {
    color: var(--van-primary-color);
}
</style>